<template>
    <div class="test2">
        <div id="myChart2" style="width:100%;height:300px;"></div>
    </div>
  </template>
<script>
export default {
  data () {
    return {
      xData:[],
      yData:[],
      myChart2: ''
    }
  },
  mounted() {
    this.drawLine1()
    this.getCaseListByTime()
  },
  methods: {
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      this.myChart2.setOption({
        title: {
          text: '近5次任务完成情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'axis' // axis   item   none三个值
        },
        xAxis: {
          type: 'category',
          data: ['近一次', '近两次', '近三次', '近四次', '近五次'], // x轴数据
          name: '' // x轴名称
          // x轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
        },
        yAxis: {
          type: 'value',
          name: '已完成' // y轴名称
          // y轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
        },
        legend: {
          orient: 'vertical',
          x: 'center',
          y: 'top',
          data: ['待完成','已完成']
        },
        series: [
          {
            name: '待完成',
            data:this.xData,
            type: 'line'
          },
          {
            name: '已完成',
            data:this.yData,
            type: 'line'
          }
        ]
      })
    },
    async getCaseListByTime(){
        const { data: res } = await this.$http.get("/api/case/recent")
            if (res.meta.status !== 200) return
            var data=res.data
            console.log(data)
            console.log(data[0])
            data[0].forEach(ele => {
                this.xData.push(ele.num)
            });
            data[1].forEach(ele=>{
              this.yData.push(ele.num)
      })
      this.drawLine1()
    }
  }
}
</script>
<style>
.test2{
  width:500px;
  height:400px;
  position: relative;
  top:200px;
  left:500px
}
</style>
  